<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频版-图片轮播</title>
    <style>
        *{
            margin:0;
        }
        .carousel-container{
            
            height: 500px;
            width: 800px;
            border: 10px solid gray;
            margin-top: 100px;
            margin-left: 50px;
        }
        .carousel-left{
            position: absolute;
            height: 100px;
            width: 30px;
            background-color: rebeccapurple;
            border: 1px solid gray;
            margin-top: 200px;
            /* 父层height: 500px; 子层height: 100px; 公式：（(500px/2)-(100px/2))结果就是 自身应该距离父层margin-top: 200px; */
        }
        .carousel-right{
            position: absolute;
            height: 100px;
            width: 30px;
            background-color: red;
            border: 1px solid gray;
            margin-top: 200px;
            /* 父层height: 500px; 子层height: 100px; 公式：（(500px/2)-(100px/2))结果就是 自身应该距离父层margin-top: 200px; */
            margin-left: 770px;
            /* 父层 width: 800px; 子层是width: 30px; 800-30*/
        }
        p{
            position: absolute;
            font-size: 30px;
            margin-top: 25px;
            user-select: none;
            /* p标签不允许被选择 */

            caret-color: transparent;
            /* 隐藏光标 */
        }
        /* css模糊选择器 ^= 是以carousel-number为开头的 */
        /* css模糊选择器 *= 是以***为包含 */
        [class^="carousel-number"]{
            position: absolute;
            height: 25px;
            width: 25px;
            background-color: yellowgreen;
            border: 1px solid red;
            border-radius: 100px;
            margin-top: 440px;
            caret-color: transparent;
        }
        .carousel-number0{margin-left: 300px;}
        .carousel-number1{margin-left: 350px;}
        .carousel-number2{margin-left: 400px;}
        .carousel-number3{margin-left: 450px;}
    </style>
    <script>
        //0. 初始化一下内存资源 —— 各个图片
        var imgs = ["../imgs/1.jpg","../imgs/2.jpeg","../imgs/3.jpg","../imgs/4.png"];

        window.onload = function(){

            //1. 初始化一下第一张轮播图
            var carousel = document.querySelector(".carousel-container");
            carousel.style.backgroundImage="url('../imgs/1.jpg')";
            carousel.setAttribute("imgNum",0);

            //2. 将第一个小点变黑
            var carouselNumber0 = document.querySelector(".carousel-number0");
            carouselNumber0.style.backgroundColor="black";

            //3. 编写自动切换图片
            setInterval(changeImgs,7000);

            //4. 左右按键切换图片
            //4.1. 左键
            var carouselLeft = document.querySelector(".carousel-left");
            carouselLeft.addEventListener("click",function(evt){
                changeImgs("left");
            });
            //4.2.右键
            var carouselLeft = document.querySelector(".carousel-right");
            carouselLeft.addEventListener("click",function(evt){
                changeImgs("right");
            });

            //5. 最下面小点的监听事件
            var carouselNumbers = document.getElementById("carousel-numbers").getElementsByTagName("div");
            for(var i=0;i<carouselNumbers.length;i++){
                //这里的i需要用闭包进行处理
                //如果不用闭包处理的话，这里的i永远等于length 即永远等于4
                (function(i){
                    carouselNumbers[i].onclick = function(){
                    changeImgs(i);
                }})(i);
            }
        }
        function changeImgs(val){
            //1. 获取父元素的隐藏属性imgNum
            var carouselContainer = document.querySelector(".carousel-container");
            var imgNum_old = carouselContainer.getAttribute("imgNum");

            if(val == undefined){//初始化的时候没有传递值，所以是undefined
                imgNum_new = Number(imgNum_old)+1;
                if(imgNum_new > imgs.length-1){
                    imgNum_new=0;
                }
            } else if(val === "left"){
                imgNum_new = Number(imgNum_old)-1;
                if(imgNum_new < 0){
                    imgNum_new=imgs.length-1;
                }
            } else if(val ==="right"){
                imgNum_new = Number(imgNum_old)+1;
                if(imgNum_new > imgs.length-1){
                    imgNum_new=0;
                }
            } else if(val ===0){
                imgNum_new=0;
            } else if(val ===1){
                imgNum_new=1;
            } else if(val ===2){
                imgNum_new=2;
            } else if(val ===3){
                imgNum_new=3;
            }

            carouselContainer.style.backgroundImage="url(../imgs/"+imgs[imgNum_new]+")";
            carouselContainer.setAttribute("imgNum",imgNum_new);

            var carouselNumbers = document.getElementById("carousel-numbers").getElementsByTagName("div");
            carouselNumbers[imgNum_old].style.backgroundColor="yellowgreen";
            carouselNumbers[imgNum_new].style.backgroundColor="black";
        }
    </script>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel-left">
            <p>&lt;</p>
        </div>
        <div class="carousel-right">
            <p>&gt;</p>
        </div>
        <div id="carousel-numbers">
            <div class="carousel-number0"></div>
            <div class="carousel-number1"></div>
            <div class="carousel-number2"></div>
            <div class="carousel-number3"></div>
        </div>
    </div>
</body>
</html>